let show = new Vue({
    el: '#show-list',
    data: {
        shows: [],
        films: [],
        halls: [],
        currentShow: {},
        isShow: false,
        currentPage: '',
        totalPageCount: ''
    },
    created() {
        // 查询所有放映计划
        $.get('http://localhost:8080/cinema/api/ShowListServlet.do', function (dto) {
            show.shows = dto.value;
        });

        // 查询所有影片
        $.get('http://localhost:8080/cinema/api/FilmListServlet.do', function (dto) {
            show.films = dto.value;

        });

        // 查询所有影厅
        $.get('http://localhost:8080/cinema/api/HallListServlet.do', function (dto) {
            show.halls = dto.value;
        });
    },
    methods: {
        update: function (i, id) {
            let formData = {
                showId: id,
                status: 2
            }

            // 修改前查询是否已有卖座
            $.get('http://localhost:8080/cinema/api/SelectSeatConditionServlet.do', formData, function (dto) {
                if (dto.value.length != 0) {
                    layer.msg("该放映场次正在出售中，无法进行修改操作！", { offset: 't', icon: 4 });
                    return;
                }

                show.currentShow = show.shows[i];
                $("#showId2").val(id);
                // $("#showIndex").val(i);
                for (let f of show.films) {
                    if (f.filmId == show.shows[i].filmId) {
                        $("#filmLong2").val(f.filmLong);
                    }
                }

                // 影片修改弹出层
                layer.open({
                    type: 1,
                    title: ['修改上映计划', 'font-size:18px;color:orange'],
                    anim: 4,   // 动画
                    resize: false,  // 是否允许拉伸改变宽高
                    area: ['800px', '480px'], // 设置宽，高
                    shadeClose: false, //点击遮罩关闭
                    scrollbar: false,   // 屏蔽浏览器滚动（false: 则屏蔽）
                    content: $("#show-update")
                });
            });
        },
        del: function (i, id) {
            let formData = {
                showId: id,
                status: 2
            }
            // 删除前查询是否已有卖座
            $.get('http://localhost:8080/cinema/api/SelectSeatConditionServlet.do', formData, function (dto) {
                if (dto.value.length != 0) {
                    layer.msg("该放映场次正在出售中，无法进行删除操作！", { offset: 't', icon: 4 });
                    return;
                }

                layer.confirm('确定要删除此放映计划嘛？', {
                    skin: 'layui-layer-molv', icon: 3, title: '提示',
                    btn: ['是的', '取消'] //按钮
                }, function () {

                    let hid = show.shows[i].hallId;
                    let rowsCols = "";
                    for (let h of show.halls) {
                        if (h.hallId == hid) {
                            rowsCols = h.rowsCols
                        }
                    }
                    // 根据"_"符号截取字符串
                    let arr = rowsCols.split("_");
                    let rows = parseInt(arr[0]);
                    let seatData = {
                        showId: id,
                        rows: rows
                    }

                    // 删除座位表 
                    // 必须先删除座位表，对应的放映计划表才能够删除成功
                    // 因为放映计划表是主键表，座位表是放映计划表的外键表）
                    $.ajax({
                        url: 'http://localhost:8080/cinema/api/DeleteSeatByShowIdRowServlet.do',
                        type: 'delete',
                        data: JSON.stringify(seatData),     // 把JavaScript对象，转换为JSON字符串
                        success: function (dto) {
                            if (dto.code == 200) {
                                // 待座位表删除成功后 ， 再执行删除放映计划表
                                $.ajax({
                                    url: 'http://localhost:8080/cinema/api/ShowDeleteServlet.do',
                                    type: 'delete',
                                    data: JSON.stringify(formData),     // 把JavaScript对象，转换为JSON字符串
                                    success: function (dto) {
                                        if (dto.code == 200) {
                                            show.shows.splice(i, 1)
                                            layer.msg(dto.value, { icon: 1 });
                                        } else {
                                            layer.msg(dto.msg, { icon: 5 });
                                        }
                                    }
                                });
                            } else {
                                console.log(dto.msg);
                            }
                        }
                    });

                }, function () {

                });
            });
        },
        updateShow: function () {
            let formData = {
                showDate: $("#showDate2").val(),
                startTime: $("#startTime2").val(),
                endTime: $("#endTime2").val(),
                price: $("#price2").val(),
                showId: $("#showId2").val()
            }

            $.ajax({
                url: 'http://localhost:8080/cinema/api/UpdateShowServlet.do',
                type: 'put',
                data: JSON.stringify(formData),
                dataType: 'json',
                success: function (dto) {
                    if (dto.code == 200) {
                        //show.shows.splice($("#showIndex").val(),1,show.currentShow)  //替换
                        // 查询所有放映计划( 刷新)
                        $.get('http://localhost:8080/cinema/api/ShowListServlet.do', function (dto) {
                            show.shows = dto.value;
                        });
                        show.currentShow = {};
                        layer.close(layer.index);   // 关闭弹出层
                        layer.msg(dto.value, { icon: 1 });

                    } else {
                        layer.msg(dto.msg, { icon: 5 });
                    }
                }
            });

        },
        add: function () {
            let currentFilmStatus = this.films[$("#filmIndex").val()].filmStatus;
            let fid = $("#filmId").val();
            let hid = $("#hallId").val();

            // 判断该放映的影片是否已上映 ，如果还未上映，则修改其上映状态为已上映状态
            if (currentFilmStatus == 0) {
                let filmParam = {
                    status: 1,
                    filmId: fid
                }

                $.ajax({
                    url: 'http://localhost:8080/cinema/api/UpdateFilmStatusByIdServlet.do',
                    type: 'put',
                    data: JSON.stringify(filmParam),
                    dataType: 'json',
                    success: function (dto) {
                        // if (dto.code == 200) {
                        //     console.log(dto.value);

                        // } else {
                        //     console.log(dto.msg);
                        // }
                    }
                });
            }

            let formData = {
                filmName: $("#filmName option:selected").text(),
                hallName: $("#hallName option:selected").text(),
                showDate: $("#showDate").val(),
                startTime: $("#startTime").val(),
                endTime: $("#endTime").val(),
                price: $("#price").val(),
                filmId: fid,
                hallId: hid

            }

            $.post('http://localhost:8080/cinema/api/ShowAddServlet.do', formData, function (dto) {
                if (dto.code == 200) {
                    // 获取该放映影厅座位的行数与列数，用于添加本放映场次影厅的座位表
                    let rowsCols = show.halls[$("#hallIndex").val()].rowsCols;
                    // 根据"_"符号截取字符串
                    let arr = rowsCols.split("_");
                    let rows = parseInt(arr[0]);
                    let cols = parseInt(arr[1]);


                    let hallParams = {
                        seatRow: rows,
                        seatCol: cols,
                        hallId: hid,
                        showId: dto.value
                    }

                    $.post('http://localhost:8080/cinema/api/SeatAddServlet.do', hallParams, function (dto) {
                        // console.log(dto.value);
                    });

                    // 查询所有放映计划 (重新更新页面数据)
                    $.get('http://localhost:8080/cinema/api/ShowListServlet.do', function (dto) {
                        show.shows = dto.value;
                    });


                    clearAll();                 // 清空弹出层表单的内容
                    layer.close(layer.index);   // 关闭弹出层
                    layer.msg("添加成功", { icon: 6 });
                } else {
                    layer.msg(dto.msg, { icon: 5 })
                }
            });


        },
        more: function (i) {
            localStorage.setItem("show", JSON.stringify(this.shows[i]));
            location.href = "show_more.html";
        },
        checkPager: function () {
            let btn = $("#check");
            if (btn.text() == "分页显示") {
                // 分页查询
                $.get('http://localhost:8080/cinema/api/ShowListByPagerServlet.do', function (dto) {
                    show.shows = dto.value.data;
                    show.isShow = true;
                    show.currentPage = dto.value.currentPage;
                    btn.text('显示全部');

                    if (dto.value.totalRecords % dto.value.pageCount == 0) {
                        show.totalPageCount = Math.floor(dto.value.totalRecords / dto.value.pageCount);

                    } else {
                        show.totalPageCount = Math.floor(dto.value.totalRecords / dto.value.pageCount) + 1;

                    }

                });
            } else {
                // 非分页查询
                $.get('http://localhost:8080/cinema/api/ShowListServlet.do', function (dto) {
                    show.shows = dto.value;
                    show.isShow = false;
                    btn.text('分页显示');
                });
            }
        },
        first: function () {
            this.currentPage = 1;
            let formData = {
                cp: this.currentPage
            }
            $.get('http://localhost:8080/cinema/api/ShowListByPagerServlet.do', formData, function (dto) {
                show.shows = dto.value.data;

            });
        },
        up: function () {
            if (this.currentPage == 1) {
                return;
            }
            this.currentPage = this.currentPage - 1;
            let formData = {
                cp: this.currentPage
            }
            $.get('http://localhost:8080/cinema/api/ShowListByPagerServlet.do', formData, function (dto) {
                show.shows = dto.value.data;

            });
        },
        down: function () {
            if (this.currentPage == this.totalPageCount) {
                return;
            }
            this.currentPage = this.currentPage + 1;
            let formData = {
                cp: this.currentPage
            }
            $.get('http://localhost:8080/cinema/api/ShowListByPagerServlet.do', formData, function (dto) {
                show.shows = dto.value.data;

            });
        },
        end: function () {
            let formData = {
                cp: this.totalPageCount
            }
            $.get('http://localhost:8080/cinema/api/ShowListByPagerServlet.do', formData, function (dto) {
                show.shows = dto.value.data;
                show.currentPage = dto.value.currentPage;
            });
        },
        go: function () {
            let formData = {
                cp: $(".bb").val()
            }

            $.get('http://localhost:8080/cinema/api/ShowListByPagerServlet.do', formData, function (dto) {
                show.shows = dto.value.data;
                show.currentPage = dto.value.currentPage;
            });
        },
        selectByLike: function () {
            let formData = {
                cond: $("#cond").val()
            }
            // 发送异步 ，实现放映计划的模糊查询
            $.get('http://localhost:8080/cinema/api/SelectShowsByLikeServlet.do', formData, function (dto) {
                console.log(dto.value);
                show.shows = dto.value;
            });
        }
    }
});

// 清空添加放映计划弹出层页面的表单内容
function clearAll() {
    $("#show-add :input").val('');
    $("#filmName option:first").prop("selected", 'selected');
    $("#hallName option:first").prop("selected", 'selected');
}